import React, {Suspense, memo, useEffect, useState} from 'react';
import {Link, NavLink, Outlet, useNavigate} from "react-router-dom";
import AppStyle from "./AppStyle";
import {Input} from 'antd';
import {log} from 'console';
import BottomNavbar from "./components/part/bottomNavbar/BottomNavbar";
import ProjectLogo from "./components/part/projectLogo/ProjectLogo";

const {Search} = Input;
type Props = {};


export default memo(function App(props: Props) {
  /**
   * 由于router.js中没有提供配置重定向，所以我们需要
   * 通过使用API的方式进行
   *
   *
   */

  //这里我们需要注册一下路由跳转
  const navigate = useNavigate();

  //用户id
  const [userId,setUserId]=useState<number>();

  /**
   * Bug问题,只要我们刷新页面,就会重新跳转到home页面
   * 所以这个bug问题必须修复
   * 解决方法
   *  1. 不使用该跳转方式,而是使用插件中提供的,但是这个插件提供的方法未找到
   *  2. 使用session存储,在网页进来时添加标志,在网页退出时删除标志
   *     根据标志是否存在确定是否跳转
   *
   */
  useEffect(() => {
    //获取用户id
    setUserId(parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string));
    // navigate("/home");//当我们访问App时,立刻跳转到子路由
    console.log(process.env.REACT_APP_BASE_URL,"aa");
  }, []);

  return (

    <AppStyle $userCover={localStorage.getItem("yf_gaduation_zzmusic_user_cover")}>
      {/* 导航栏我们在这里写 */}
      <div className="nav-head-box">
        <ul className="home-head-left">
          <li className="nav-item-li project-logo-li">
            <ProjectLogo width={260}/>
          </li>
          <li className="nav-item-li">
            <NavLink className="nav-item-a" to="/home">音乐馆</NavLink>
          </li>
          <li className="nav-item-li">
            <NavLink className="nav-item-a" to="/mine">我的音乐</NavLink>
          </li>
          <li className="nav-item-li">
            <NavLink className="nav-item-a" to="/creatorcenter">创作者中心</NavLink>
          </li>
          <li className="nav-item-li">
            <NavLink className="nav-item-a" to="/about">关于</NavLink>
          </li>
        </ul>

        <div className="head-search">
          <Search className="head-search-input" placeholder="搜索音乐、歌单、用户"/>
        </div>
        {
          userId?
            <div className='user-photo' ></div>:
            <div className="user-unlogin"
                 onClick={()=>{
                  navigate("/login");
                 }}
            >登录</div>
        }

      </div>

      <Outlet/>

      {/*  底部导航信息栏 */}
      <BottomNavbar/>
    </AppStyle>
  );
});
